import { useEffect } from "react"
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader';
import {  RGBELoader } from 'three/addons/loaders/RGBELoader';
/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-10-19 11:35:36
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-10-19 22:00:42
 * @FilePath: /three-react/src/pages/Base.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

const width = window.innerWidth - 200;
const height = window.innerHeight

function createRender (width, height) {

    // 创建场景
    const scene = new THREE.Scene({background: '#ffffff'});
    // 创建相机
    const camera = new  THREE.PerspectiveCamera(45, width/height, 1, 500);
    camera.position.z = 5;
    // 创建webgl渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器窗口大小
    renderer.setSize(width, height);
    // renderer.setClearColor(0xffffff);
    document.getElementById("container")?.appendChild(renderer.domElement);

  // 平行光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(80, 100, 50);
  scene.add(directionalLight)

  // 平行光辅助观察
  const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 50, 0xff0000);
  scene.add(directionalLightHelper)
    

    const loader = new GLTFLoader();
    loader.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function(gltf) {
      scene.add(gltf.scene);
      function animate() {
        requestAnimationFrame(animate)
        gltf.scene.rotation.x += 0.01;
        // 渲染场景
        renderer.render(scene, camera);
      }
  
      animate();
    })

    // 创建几何体
    
    // 创建基础材质
    
    // 创建一个网格将几何体和材质组合在一起
    
    // 将组合好的几何体加入到场景中
    

  

    
    
    return renderer
}
export default function GLTFModel() { 
  useEffect(() => {
    if(!window.isMounted) {
      createRender(width, height);
      window.isMounted = true;
    }
  }, [])
  return (
    <div id="container"></div>
  )
}